<template>
  <el-carousel
    trigger="click"
    height="100px"
    indicator-position="none"
    arrow="never"
    :interval="3000"
    autoplay
  >
    <el-carousel-item v-for="item in bannerList" :key="item">
      <img :src="item" alt="" />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const bannerList = reactive([
  "https://dimg04.c-ctrip.com/images/0zg4w12000bbbeqeoC80A.png",
  "https://dimg04.c-ctrip.com/images/0zg1412000bajqdroC021.jpg",
  "https://dimg04.c-ctrip.com/images/0zg3n12000beojevv15A2.jpg",
  "https://dimg04.c-ctrip.com/images/0zg5l12000b95ext5E88A.png",
  "https://dimg04.c-ctrip.com/images/0zg5k12000b6z3yb844FD.jpg",
  "https://dimg04.c-ctrip.com/images/0zg6o12000begjwnxDA49.jpg",
  "https://dimg04.c-ctrip.com/images/0zg0m12000bbvu6un783A.jpg",
  "https://dimg04.c-ctrip.com/images/0zg3x12000bdqdmz99718.png",
  "https://dimg04.c-ctrip.com/images/0zg4612000ap2m6ht3DD7.png",
  "https://dimg04.c-ctrip.com/images/0zg1412000bajqdroC021.jpg",
]);
</script>

<style scoped lang="scss">
    .el-carousel{
        margin-top: 20px;
        border-radius: 16px;
        img{
          width: 100%;
          height: 100%;
        }
    }
</style>
